<template>
	<view>
    <!-- 购物车列表的标题区域 -->
		<view class="cart-title">
		  <!-- 左侧图标 -->
      <uni-icons type="shop" size="18"></uni-icons>
      <!-- 描述文本 -->
      <text class="cart-title-text">购物车</text>
		</view>
    <!-- 循环渲染购物车中的商品到页面 -->
    <block v-for="(goods,i) in cart" :key="i">
      <!-- 使用以前封装好的my-goods组件-->
      <my-goods :item="goods" :showRadio="true" @radio-change="radioChangeHandler"></my-goods>
    </block>
	</view>
</template>

<script>
 import badgeMix from '@/mixins/tabbar-badge.js'
 import {mapState,mapMutations} from 'vuex'
	export default {
    computed:{
      // 导出购物车中的对象数组
      ...mapState('m_cart',['cart'])
    },
    // mixins 选项接受一个混入对象的数组,是一个方法
    mixins:[badgeMix],
		data() {
			return {
			
			};
		},
    methods:{
      ...mapMutations('m_cart',['updataGoodsState']),
      radioChangeHandler(e){
        this.updataGoodsState(e)//这个传递过来的参数会包含商品的id和state
      }
    }
	}
</script>

<style lang="scss">
 .cart-title{
     height: 40px;
     display: flex;
     align-items: center;
     font-size: 14px;
     padding-left: 5px;
     border-bottom: 1px solid #efefef;
     
   .cart-title-text{
     margin-left: 10px;
   }
 }
</style>
